{% extends "template/base.html"%}

{% block content %}
<section id="btn">
    <h1 class="title">BUTTON</h1>
    <div class="demo-item">
        <p class="demo-desc">普通按钮</p>
        <div class="demo-block">
            <div class="ui-btn-wrap">
                <!-- 按钮样式1 -->
                <button class="ui-btn">
                    下载
                </button>
                <button class="ui-btn disabled">
                    确定
                </button>
            </div>
            <div class="ui-btn-wrap">
                <button class="ui-btn ui-btn-primary">
                    确定
                </button>
                <button class="ui-btn disabled" >
                   确定
                </button>
            </div>
            <div class="ui-btn-wrap">
                <button class="ui-btn ui-btn-danger">
                    确定
                </button>
                  <button class="ui-btn ui-btn-danger disabled">
                   确定
                </button>
            </div>
        </div>
    </div>

    <!-- 进度的按钮 -->
    <div class="demo-item">
        <p class="demo-desc">进度按钮</p>
        <div class="demo-block">
            <div class="ui-btn-wrap">
                <button class="ui-btn ui-btn-progress">
                    <span>下载</span>
                    <span class="ui-btn-inner" style="width:50%"><span>下载</span></span>
                </button>
                 <button class="ui-btn ui-btn-progress disabled">
                    <span>下载</span>
                    <span class="ui-btn-inner" style="width:50%"><span>下载</span></span>
                </button>
            </div>
        </div>
    </div>

    <!-- 高亮按钮  -->
      <div class="demo-item color-black">
        <p class="demo-desc">高亮按钮</p>
        <div class="demo-block">
            <div class="ui-btn-wrap">
                <button class="ui-btn ui-btn-highlight">
                    确定
                </button>
                <button class="ui-btn ui-btn-highlight disabled">
                    确认
                </button>
            </div>
        </div>
    </div>

    <div class="demo-item">
        <p class="demo-desc">中等（2/3）按钮</p>
        <div class="demo-block">
            <div class="ui-btn-wrap ui-btn-wrap-middle">
                <button class="ui-btn-lg-nowhole">
                    取消
                </button>
            </div>
            <div class="ui-btn-wrap ui-btn-wrap-middle">
                <button class="ui-btn-lg-nowhole ui-btn-primary">
                    取消
                </button>
            </div>
            <div class="ui-btn-wrap ui-btn-wrap-middle">
                <button class="ui-btn-lg-nowhole ui-btn-danger">
                    取消
                </button>
            </div>
            <div class="ui-btn-wrap ui-btn-wrap-middle">
                <button class="ui-btn-lg-nowhole ui-btn-danger disabled">
                    取消
                </button>
            </div>
        </div>
    </div>

    <div class="demo-item">
        <p class="demo-desc">长条按钮</p>
        <div class="demo-block">
            <div class="ui-btn-wrap">
                <button class="ui-btn-lg">
                    确定
                </button>
            </div>
            <div class="ui-btn-wrap">
                <button class="ui-btn-lg ui-btn-primary">
                    确定
                </button>
            </div>
            <div class="ui-btn-wrap">
                <button class="ui-btn-lg ui-btn-danger">
                    确定
                </button>
            </div>
            <div class="ui-btn-wrap">
                <button class="ui-btn-lg disabled">
                    取消
                </button>
            </div>
             <div class="ui-btn-wrap color-black">
                <button class="ui-btn-highlight ui-btn-lg">
                    取消
                </button>
            </div>
        </div>
    </div>

</section>
{% endblock%}
